/* eslint-disable indent */
<template>
  <div class='home-container'>
    <section class='home-analysis'>
      <!-- 头部 + tab -->
      <div class='home-title'>
        <div class='home-title-content'>
          <div class='data-header-status'>
            <el-tabs v-model="analysisType" class='status-tabs'>
              <el-tab-pane name="visit"><span slot="label" class='tab-text'>粉丝</span></el-tab-pane>
              <el-tab-pane name="article"><span slot="label" class='tab-text'>图文</span></el-tab-pane>
              <el-tab-pane name="message"><span slot="label" class='tab-text'>群发</span></el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!-- 数据分析展示部分 -->
      <div class='analysis-body'>
        <analysis-visit v-if='analysisType === "visit"'
                        ref='visitRef'
        ></analysis-visit>
        <analysis-article v-if='analysisType === "article"'
                        ref='articleRef'
        ></analysis-article>
        <analysis-message v-if='analysisType === "message"'
                        ref='messageRef'
        ></analysis-message>
      </div>
    </section>
    <!-- <section class='home-aside'>
      <div class='home-aside-wechat'>
        <div class='wechat-body'>
          <div class='wechat-title' v-show='wechatTitle'>{{wechatTitle}}</div>
          <div class='wechat-none' v-show='wechatTitle === "暂无公众号"'>当前还未绑定公众号,请点击下方"管理公众号"按钮,前去绑定!</div>
          <div class='wechat-qecode' v-show='wechatTitle !== "暂无公众号"'>
            <img :src="wechatQrCodeUrl" v-show='wechatQrCodeUrl'>
          </div>
          <div class='wechat-btn' @click='goManageWechat'>管理公众号</div>
        </div>
      </div>
      <div class='home-aside-notice'>
        <div class='notice-title'>
          <span class='notice-title-left'>公告</span>
          <span class='notice-title-right'>更多</span>
        </div>
        <ul class='notice-list'>
          <li class='notice-item' @click="showNoticeMask(index)" v-for='(notice, index) of noticeList' :key='"notice" + index'>
            <span class='notice-item-title'>{{notice.title}}</span>
            <el-tooltip :content='notice.time' placement="bottom" effect='light'>
              <span class='notice-item-time'>{{formatNoticeTime(notice.time)}}</span>
            </el-tooltip>
          </li>
        </ul>
      </div>
      <div class='home-aside-company'>
        <div class='wechat-body'>
          <div class='wechat-title'>悦米官方公众号</div>
          <div class='wechat-qecode'>
            <img src="@/assets/img/company-wxqrcode.jpg">
          </div>
          <div class='company-detail'>
            <div class='company-detail-desc'>专注生命科学、聚焦营销推广、赋能医药营销</div>
            <div class='company-detail-phone'>官方电话: 400-823-3721</div>
          </div>
        </div>
      </div>
    </section> -->
  </div>
</template>

<script>
import analysisVisit from './components/analysis-visit'
import analysisArticle from './components/analysis-article'
import analysisMessage from './components/analysis-message'
export default {
  components: {
    analysisVisit,
    analysisArticle,
    analysisMessage
  },
  data () {
    return {
      analysisType: 'visit',
      wechatQrCodeUrl: ''
    }
  },
  computed: {
    wechatTitle () {
      return sessionStorage.getItem('wechatName') ? sessionStorage.getItem('wechatName') : '暂无公众号'
    }
  },
  methods: {
    goManageWechat () {
      if (this.wechatTitle !== '暂无公众号') {
        this.linkTo({ name: 'Wechat' })
      } else {
        this.linkTo({ name: 'wechatGuide' })
      }
    },
    // getWechatQrCodeUrl () {
    //   if (!sessionStorage.getItem('wechatId')) {
    //     return
    //   }
    //   let appid = sessionStorage.getItem('appid')
    //   let url = `${this.SERVICE_WECHAT}/qrcode/${appid}`
    //   let param = {}
    //   this.get(url, param).then(res => {
    //     if (res.data.code === 200) {
    //       this.wechatQrCodeUrl = res.data.data || ''
    //     }
    //   })
    // },
    // 点击显示公告详情
    showNoticeMask (index) {
      window.eventBus.$emit('handleNoticeMask', index)
    }
  },
  created () {
  },
  mounted () {
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 当平台没绑定公众号时，显示授权页
      if (!sessionStorage.getItem('appid')) {
        vm.replaceRoute({name: 'platformAuth'})
      }
      // vm.getWechatQrCodeUrl()
    })
  },
  beforeRouteLeave (to, from, next) {
    // 如果未绑定公众号的提示，需要关闭
    this.$refs.visitRef && this.$refs.visitRef.closeMsg()
    next()
  }
}
</script>

<style lang="stylus" scoped>
.home-container
  position relative
  width 100%
  height 100%
  display flex
  background #fafafa
  border-radius 6px
  padding 10px
  box-sizing border-box
  .home-analysis
    flex 1
    display flex
    flex-direction column
    scroll()
    .home-title
      flex none
      padding 0 10px 10px 10px
      position sticky
      top 0
      z-index 10
      background #fafafa
      .home-title-content
        position relative
        padding 6px 0 0 0
        font-weight 700
        font-size 14px
        border-radius 10px
        .data-header-status
          .status-tabs
            height 34px
            >>> .el-tabs__nav
              height 34px
            >>> .el-tabs__item
              color #666
              opacity 1
              line-height 26px
              height 26px
            >>> .el-tabs__item.is-active
              .tab-text
                display block
                background #2589ff
                color #ffffff
                border-radius 30px
                padding 0 10px
            >>> .el-tabs__active-bar
              left 15px
              right 15px
              width 18px !important
            // >>> .el-tabs__nav
            //   width 300px
            //   height 34px
            //   border 1px solid red
            // >>> .el-tabs__nav.is-stretch
            //   min-width 0
            //   justify-content space-between
            // >>> .el-tabs__active-bar
            //   width 18px !important
            // >>> .el-tabs__item
            //   flex none
            //   color #666
            //   opacity 1
            //   padding 0 10px
            //   line-height 26px
            //   height 26px
            // >>> .el-tabs__item.is-active
            //   background #2589ff
            //   color #ffffff
            //   border-radius 30px
    .analysis-body
      flex-grow 1
  .home-aside
    flex none
    background #fafafa
    padding 10px 5px 10px 0
    scroll()
    width 250px
    .home-aside-wechat, .home-aside-notice, .home-aside-company
      box-sizing border-box
      background #ffffff
      border-radius 5px
      margin-bottom 10px
    .home-aside-wechat
      padding 20px 15px 15px
      .wechat-title
        line-height: 24px;
        color: #595961;
        font-weight: 700;
        font-size 14px
        no-wrap()
        margin-bottom 10px
      .wechat-none
        line-height 20px
        font-size 13px
        color #aaa
        text-indent 15px
      .wechat-qecode
        width 180px
        height 180px
        margin auto
        background #f6f6f6
        img
          display block
          height 100%
          width 100%
      .wechat-btn
        margin-top: 15px;
        font-size: 16px;
        font-weight: 700;
        background: #f4faff;
        // background: #409eff;
        border 1px solid #2589ff
        color: #2589ff;
        height 40px
        line-height 40px
        text-align center
        border-radius 6px
        cursor pointer
        &:hover
          background #e0f0fd
    .home-aside-notice
      padding 20px 15px 15px
      .notice-title
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
        display flex
        justify-content space-between
        .notice-title-left
          color #595961
        .notice-title-right
          color #9797a1
          cursor pointer
          font-size 12px
      .notice-list
        height: 150px;
        overflow-y: auto;
        font-size 12px
        color #595961
        .notice-item
          line-height: 30px;
          height: 30px;
          display flex
          justify-content space-between
          .notice-item-title
            flex 1
            position: relative;
            display: block;
            padding-right: 40px;
            no-wrap()
          .notice-item-time
            flex none
    .home-aside-company
      padding 20px 15px 20px
      .wechat-title
        line-height: 24px;
        color: #595961;
        font-weight: 700;
        font-size 14px
        no-wrap()
        margin-bottom 10px
      .wechat-qecode
        width 180px
        height 180px
        margin auto
        background #f6f6f6
        img
          display block
          height 100%
          width 100%
      .company-detail
        text-align center
        .company-detail-desc
          font-size 12px
          color #9797a1
        .company-detail-phone
          font-size 12px
          color #9797a1
          margin-top 10px
</style>
